<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="false">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row :gutter="48">
          <!--          <a-col :span="8">-->
          <!--            <a-form-model-item label="开票申请编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="invoiceApplyNo">-->
          <!--              <a-input :disabled=formDisabled v-model="model.invoiceApplyNo" placeholder="请输入开票申请编号"  ></a-input>-->
          <!--            </a-form-model-item>-->
          <!--          </a-col>-->
          <a-col :span="8">
            <a-form-model-item label="申请人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="applyUser">
              <select-user-by-dep :disabled=formDisabled v-model="model.applyUser"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="销售方单位" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="saleUnit">
              <a-input :disabled=formDisabled v-model="model.saleUnit" placeholder="请输入销售方单位"></a-input>
            </a-form-model-item>
          </a-col>
          <!--          <a-col :span="8">-->
          <!--            <a-form-model-item label="开票金额" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="invoiceAmount">-->
          <!--              <a-input :disabled=formDisabled v-model="model.invoiceAmount" placeholder="请输入开票金额"  ></a-input>-->
          <!--            </a-form-model-item>-->
          <!--          </a-col>-->
          <!--          <a-col :span="8">-->
          <!--            <a-form-model-item label="大写" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="amountInWords">-->
          <!--              <a-input :disabled=formDisabled v-model="model.amountInWords" placeholder="请输入大写"  ></a-input>-->
          <!--            </a-form-model-item>-->
          <!--          </a-col>-->
          <a-col :span="8">
            <a-form-model-item label="发票类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="invoiceType">
              <a-input :disabled=formDisabled v-model="model.invoiceType" placeholder="请输入发票类型"></a-input>
            </a-form-model-item>
          </a-col>
          <a-divider style="top:20px;">委托方信息</a-divider>
          <a-col :span="8">
            <a-form-model-item label="是否确认收票" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="confirmInvoice">
              <j-dict-select-tag :disabled=formDisabled type="list" v-model="model.confirmInvoice" dictCode="yes_no"
                                 placeholder="请选择是否确认收票"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="是否关联项目" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="hasRelatedProject">
              <j-dict-select-tag :disabled=formDisabled type="radio" v-model="model.hasRelatedProject" dictCode="yes_no"
                                 placeholder="请选择是否关联项目"/>
            </a-form-model-item>
          </a-col>
          <!--          <a-col :span="8">-->
          <!--            <a-form-model-item label="开票人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="invoiceUser">-->
          <!--              <a-input :disabled=formDisabled v-model="model.invoiceUser" placeholder="请输入开票人"  ></a-input>-->
          <!--            </a-form-model-item>-->
          <!--          </a-col>-->
          <!--          <a-col :span="8">-->
          <!--            <a-form-model-item label="开票日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="invoiceDate">-->
          <!--              <j-date :disabled=formDisabled placeholder="请选择开票日期" v-model="model.invoiceDate"  style="width: 100%" />-->
          <!--            </a-form-model-item>-->
          <!--          </a-col>-->
          <a-col :span="8">
            <a-form-model-item label="购货方单位名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="purchasingUnit">
              <a-input :disabled=formDisabled v-model="model.purchasingUnit" placeholder="请输入购货方单位名称"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="纳税人识别号" :labelCol="labelCol" :wrapperCol="wrapperCol"
                               prop="taxpayerRegistrationNumber">
              <a-input :disabled=formDisabled v-model="model.taxpayerRegistrationNumber"
                       placeholder="请输入纳税人识别号"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="地址、电话" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="addressPhone">
              <a-input :disabled=formDisabled v-model="model.addressPhone" placeholder="请输入地址、电话"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="开户行及账号" :labelCol="labelCol" :wrapperCol="wrapperCol"
                               prop="openingBankAccountNumber">
              <a-input :disabled=formDisabled v-model="model.openingBankAccountNumber"
                       placeholder="请输入开户行及账号"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="发票备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="invoiceRemark">
              <a-textarea :disabled=formDisabled v-model="model.invoiceRemark" placeholder="请输入发票备注"></a-textarea>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="附言" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="postscript">
              <a-textarea :disabled=formDisabled v-model="model.postscript" placeholder="请输入附言"></a-textarea>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="附件" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="fileUpload">
              <a-input :disabled=formDisabled v-model="model.fileUpload" placeholder="请输入附件"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="经办人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="handlerId">
              <select-user-by-dep :disabled=formDisabled v-model="model.handlerId" disabled/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="经办部门" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="handlerDeptId">
              <j-select-depart :disabled=formDisabled v-model="model.handlerDeptId" multi disabled></j-select-depart>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="创建日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="createTime">
              <j-date :disabled=formDisabled placeholder="请选择日期" v-model="model.createTime" :show-time="true"
                      date-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" disabled/>
            </a-form-model-item>
          </a-col>
          <a-col v-if="showFlowSubmitButton" :span="24" style="text-align: center">
            <a-button @click="submitForm">提 交</a-button>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
    <a-tabs v-model="activeKey" @change="handleChangeTabs">
      <a-tab-pane tab="开票信息" :key="refKeys[0]" :forceRender="true">
        <j-editable-table
          :ref="refKeys[0]"
          :loading="demoStudentTable.loading"
          :columns="demoStudentTable.columns"
          :dataSource="demoStudentTable.dataSource"
          :maxHeight="300"
          :disabled="formDisabled"
          :rowNumber="true"
          :rowSelection="true"
          :actionButton="true"/>
      </a-tab-pane>
    </a-tabs>
  </a-spin>
</template>

<script>

import { getAction, httpAction } from '@/api/manage'
import { validateBlankValue } from '@/utils/util'
import SelectUserByDep from '@/views/scy/components/SelectUserByDep'
import moment from 'moment';
import { mapGetters } from 'vuex';
import { JEditableTableModelMixin } from '@/mixins/JEditableTableModelMixin'
import { FormTypes } from '@/utils/JEditableTableUtil'

queryTenderUnitDept:'/api/erp/omc/tender/erpOmcTenderUnit/queryTenderUnitDept'

export default {
  name: 'ErpFinanceInvoiceManagerForm',
  mixins: [JEditableTableModelMixin],
  components: {
    SelectUserByDep,
  },
  props: {
    //流程表单data
    formData: {
      type: Object,
      default: () => {
      },
      required: false
    },
    //表单模式：true流程表单 false普通表单
    formBpm: {
      type: Boolean,
      default: false,
      required: false
    },
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  data() {
    return {
      model: {},
      labelCol: {},
      dataSource: [],
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 24 },
      },
      confirmLoading: false,
      validatorRules: {
        applyUser: [
          { required: true, message: '请输入申请人!' },
          { validator: (rule, value, callback) => validateBlankValue('erp_finance_invoice_manager', 'apply_user', value, this.model.id, callback) },
        ],
        saleUnit: [
          { required: true, message: '请输入销售方单位!' },
          { validator: (rule, value, callback) => validateBlankValue('erp_finance_invoice_manager', 'sale_unit', value, this.model.id, callback) },
        ],
        invoiceType: [
          { required: true, message: '请输入发票类型!' },
          { validator: (rule, value, callback) => validateBlankValue('erp_finance_invoice_manager', 'invoice_type', value, this.model.id, callback) },
        ],
        hasRelatedProject: [
          { required: true, message: '请输入是否关联项目!' },
          { validator: (rule, value, callback) => validateBlankValue('erp_finance_invoice_manager', 'has_related_project', value, this.model.id, callback) },
        ],
      },
      refKeys: ['demoStudent',],
      tableKeys: ['demoStudent',],
      activeKey: 'demoStudent',
      // 学生名
      demoStudentTable: {
        loading: false,
        dataSource: [],
        columns: [
          {
            title: '项目名称',
            key: 'porjectName',
            type: FormTypes.select,
            width: '200px',
            placeholder: '选择${title}',
            defaultValue: '',
            validateRules: [{ required: true, message: '${title}不能为空' }],
          },
          {
            title: '款项金额',
            key: 'paymentAmount',
            type: FormTypes.input,
            width: '200px',
            placeholder: '请输入${title}',
            defaultValue: '',
            validateRules: [{ required: true, message: '${title}不能为空' }],
          },
          {
            title: '预计回款时间',
            key: 'predictReturnDate',
            type: FormTypes.inputNumber,
            width: '200px',
            placeholder: '请输入${title}',
            defaultValue: '',
            validateRules: [{ required: true, message: '${title}不能为空' }],
          },
          {
            title: '团队年度',
            key: 'teamYear',
            type: FormTypes.select,
            dictCode: 'teamYear',
            width: '200px',
            placeholder: '请输入${title}',
            defaultValue: '',
            validateRules: [{ required: true, message: '${title}不能为空' }],
          },
          {
            title: '所属团队',
            key: 'subordinateTeam',
            type: FormTypes.input,
            width: '200px',
            placeholder: '请输入${title}',
            defaultValue: '',
            validateRules: [{ required: true, message: '${title}不能为空' }],
          },
          {
            title: '团队负责人',
            key: 'teamPrincipalId',
            type: FormTypes.input,
            width: '200px',
            placeholder: '请输入${title}',
            defaultValue: '',
            validateRules: [{ required: true, message: '${title}不能为空' }],
          },
          {
            title: '所属年度',
            key: 'itsAnnual',
            type: FormTypes.input,
            width: '200px',
            placeholder: '请输入${title}',
            defaultValue: '',
            validateRules: [{ required: true, message: '${title}不能为空' }],
          },
          {
            title: '开票金额',
            key: 'invoiceAmount',
            type: FormTypes.input,
            width: '200px',
            placeholder: '请输入${title}',
            defaultValue: '',
            validateRules: [{ required: true, message: '${title}不能为空' }],
          },
          {
            title: '关联进度',
            key: 'associatedProgress',
            type: FormTypes.input,
            width: '200px',
            placeholder: '请输入${title}',
            defaultValue: '',
            validateRules: [{ required: true, message: '${title}不能为空' }],
          },
        ]
      },
      url: {
        add: '/api/erp/finance/invoice/erpFinanceInvoiceManager/add',
        edit: '/api/erp/finance/invoice/erpFinanceInvoiceManager/edit',
        queryById: '/api/erp/finance/invoice/erpFinanceInvoiceManager/queryById'
      }
    }
  },
  computed: {
    formDisabled() {
      if (this.formBpm === true) {
        if (this.formData.disabled === false) {
          return false
        }
        return true
      }
      return this.disabled
    },
    showFlowSubmitButton() {
      if (this.formBpm === true) {
        if (this.formData.disabled === false) {
          return true
        }
      }
      return false
    }
  },
  created() {
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model));
    //如果是流程中表单，则需要加载流程表单data
    this.showFlowData();
  },
  methods: {
    ...mapGetters(['userInfo']),
    add(value) {
      this.dataSource = [];
      this.edit(this.modelDefault);
      this.model.handlerId = value.loginUser.empId;
      this.model.handlerDeptId = this.userInfo().deptId;
      this.model.createTime = moment().format('YYYY-MM-DD HH:mm:ss');
    },
    changeRelatedProject() {

    },
    edit(record) {
      this.$refs.form.resetFields();
      this.model = Object.assign({}, record);
      this.visible = true;
    },
    //渲染流程表单数据
    showFlowData() {
      if (this.formBpm === true) {
        let params = { id: this.formData.dataId };
        getAction(this.url.queryById, params).then((res) => {
          if (res.success) {
            this.edit(res.result);
          }
        });
      }
    },
    submitForm() {
      const that = this;
      // 触发表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
          that.confirmLoading = true;
          let httpurl = '';
          let method = '';
          if (!this.model.id) {
            httpurl += this.url.add;
            method = 'post';
          } else {
            httpurl += this.url.edit;
            method = 'put';
          }
          httpAction(httpurl, this.model, method).then((res) => {
            if (res.success) {
              that.$message.success(res.message);
              that.$emit('ok');
            } else {
              that.$message.warning(res.message);
            }
          }).finally(() => {
            that.confirmLoading = false;
          })
        }

      })
    },
  }
}
</script>
